<template>
  <div class="user_mine">
      <Sheader :title="'我的'"></Sheader>
      <div class="user_content">
          <div class="user_img"><img src="../assets/logo1.jpg" alt=""></div>
          <div class="user_">
              <p>昵称: {{list.nickName}}</p>
              <p>登录名: {{list.loginName}}</p>
              <p>个性签名: 越努力越幸运</p>
          </div>
      </div>

      <div>
          <van-cell title="我的订单" is-link @click="goMyOrder"/>
          <van-cell title="账号管理" is-link @click="goUserAccount"/>
          <van-cell title="地址管理" is-link />
          <van-cell title="关于我们" is-link />
      </div>

      <Tabbar></Tabbar>
  </div>
</template>

<script>
import Sheader from '../components/Header.vue'
import {useRouter} from 'vue-router'
import Tabbar from '../components/Tabbar.vue'
import {onMounted, reactive, toRefs} from 'vue'
import { getUserInfo } from '../service/user'
export default {
    components: {
        Sheader,
        Tabbar
    },
    setup() {
        const router = useRouter()
        const state= reactive({
            list:[  ]
        })
        const goMyOrder = () => {
            router.push('/MyOrder')
        }
        
        const goUserAccount = () => {
            router.push('/userAccount')
        }

        const init = async() => {
            const {data} = await getUserInfo()
            state.list = data
            console.log(data);
        }
        onMounted(() => {
            init()
        })

        return {
            goMyOrder,
            ...toRefs(state),
            goUserAccount
        }
    }
}
</script>

<style lang="less" scoped>
.user_content{
    display: flex;
    background-color: #1baeae;
    box-shadow: 5px 5px 5px rgb(205, 199, 199);
    margin: 10px 10px;
    border-radius: 10px;
    .user_img{
        flex: 1;
        width: 30px;
        height: 70px;
        padding: 15px;
        img{
            width: 100%;
            height: 100%;
            border-radius: 60%
        }
    }
    .user_{
        height: 70px;
        padding-top: 10px;
        color: white;
        flex: 4;
        p{
            margin: 8px;
        }
    }
}
</style>